import { Skeleton, Table } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useRequest } from "ahooks";
import dayjs from "dayjs";
import { useEffect, useState } from "react";
import { AtPagination, AtSearchBar } from "taro-ui";
import FormCalendar from "../../../components/FormCalendar";
import { getRentingUserApi } from "../../../servers/servers";
import Taro from "@tarojs/taro";
import { Copy } from "@nutui/icons-react-taro";
const Lease = () => {
  const [total, setTotal] = useState(0);

  const columns1 = [
    {
      title: "用户号码",
      key: "mobile",
      fixed: "left",
      width: 120,
      render: (_record, index) => {
        return (
          <div  onLongPress={() => {
            Taro.setClipboardData({
              data: _record?.mobile,
              success: function (res) {
                Taro.getClipboardData({
                  success: function (res) {
                    console.log(res.data); // data
                  },
                });
              },
              fail: function (res) {
                console.log("res", res.errMsg);
              },
            });
          }}>
            {_record?.mobile}{" "}
            
          </div>
        );
      },
    },
    {
      title: "用户姓名",
      key: "name",
      width: 60,
      // render: (_record, index) => {
      //   return "*" + _record?.name?.slice(1);
      // },
      // fixed: 'left',
    },

    // {
    //   title: '组织编码',
    //   key: 'organization_code',
    // },
    // {
    //   title: '组织类型',
    //   key: 'type_organization',
    // },
    {
      title: "购买套餐",
      key: "package_name",
      width: 60,
    },
    {
      title: "连续使用天数",
      key: "continuous_days",
      width: 30,
    },
    {
      title: "剩余天数",
      key: "days_remaining",
      width: 30,
    },
    {
      title: "到期时间",
      key: "expiration_time",
      render: (_record, index) => {
        return dayjs(_record?.expiration_time).format("YYYY-MM-DD");
      },
      width: 100,
    },
    {
      title: "订单金额",
      key: "rent",
      width: 50,
    },
    {
      title: "预估分成金额",
      key: "reward_amount",
      width: 50,
    },
  ];

  const { data, run, loading } = useRequest(
    async ({ page, ...ret }) => {
      const _params = {};
      if (ret?.mobile) {
        _params.mobile = ret.mobile;
      }
      if (startDate && endDate) {
        _params.expiration_time__range = [startDate, endDate];
      }

      _params.equipment_category = "电池";
      const { data } = await getRentingUserApi({
        page,
        filters: JSON.stringify({
          ..._params,
        }),
      });
      setTotal(data?.count);
      return data;
    },
    {
      manual: true,
    }
  );

  // 要搜索的手机号
  const [searchPhone, setSearchPhone] = useState("");
  const [startDate, setStartDate] = useState("");
  const [endDate, setEndDate] = useState("");

  const [currentPage, setcurrentPage] = useState(1);

  useEffect(() => {
    run({
      page: currentPage,
      mobile: searchPhone,
      start_date: startDate,
      end_date: endDate,
    });
  }, [currentPage, searchPhone, startDate, endDate]);

  const [searchValue, setSearchValue] = useState("");

  return (
    <>
      <View
        style={{
          display: "flex",
          alignItems: "center",
        }}
      >
        <View
          style={{
            flex: 1,
          }}
        >
          <AtSearchBar
            showActionButton
            value={searchValue}
            onChange={(val) => {
              setSearchValue(val);
            }}
            onConfirm={(e) => {
              setSearchPhone(e?.target?.value);
            }}
            onActionClick={() => {
              setSearchPhone(searchValue);
            }}
            placeholder="请输入手机号"
            inputType="number"
          />
        </View>
        <FormCalendar
          title="到期日期选择"
          onConfirm={(values) => {
            setStartDate(dayjs(values?.[0]).format("YYYY-MM-DD HH:mm:ss"));
            setEndDate(
              dayjs(values?.[1])
                .add(23, "hour")
                .add(59, "minute")
                .add(59, "second")
                .format("YYYY-MM-DD HH:mm:ss")
            );
          }}
        />
      </View>

      {loading ? (
        <Skeleton rows={8} title animated />
      ) : (
        <Table
          bordered
          striped
          columns={columns1}
          data={data?.list}
          // summary={<>共 {total} 条数据</>}
        />
      )}

      <View
        style={{
          display: "flex",
          justifyContent: "center",
          marginTop: 12,
          marginBottom: 12,
        }}
      >
        共 {total} 条数据
      </View>

      <AtPagination
        style={{
          marginTop: 12,
        }}
        total={data?.count}
        pageSize={15}
        current={currentPage}
        onPageChange={(page) => {
          setcurrentPage(page?.current);
        }}
      ></AtPagination>
    </>
  );
};
export default Lease;
